<template>
	<div :class="'header-box '+(isShowBgColor?'header-box-bg':'')">
		<el-row type="flex" justify="space-around" style="height: 80px;" :gutter="20">
			<el-col style="   display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;" :xs="14" :sm="4" :md="4" :lg="4" :xl="4" :span="4">
				<div class="grid-content bg-purple">
					<div class="logo" @click="goTo(0)">
						<img src="../../../assets/img/gttg_logo.png" alt="">
					</div>
				</div>
			</el-col>
			<el-col :xs="0" :sm="15" :md="15" :lg="15" :xl="15" :span="15" style="height: 100%;">
				<div class="menuList">
					<div @click="goTo(index)" @mouseover="showChildMenu(index)" @mouseleave="hideActive"
						:class="'menuItem ' + (isActive[index]||(index+1)==selected ? 'active' : '')"
						v-for="(item, index) in menus" :key="index">
						{{item.name}}
						<div :class="'activeLine ' + (isActive[index]||(index+1)==selected ? 'active' : '')">
							<div class="triangle" v-if="isActive[index]||(index+1)==selected"></div>
						</div>
					</div>
				</div>


			</el-col>
			<el-col :span="2" :xs="10" :sm="4" :md="2" :lg="2" :xl="2" style="display: flex;
  align-items: right;
 height: 100%;">

				<div class="searchArea">
					<div class="searchBtn el-icon-search" @mouseover="showSearch" @click.stop="clickShowSearch">
					</div>
					<div class="language"><!-- <a :href="$t('languageUrl')">{{$t('language')}}</a> --> </div>
					<transition name="fade">
						<div class="miniMenuArea" v-if="isShowMiniMenu&&$store.state.user.searchMiniView">
							<ul>
								<li v-for="(item, index) in menus" :key="index">
									<div @click="goTo(index)" :class="'menuItem ' +((index+1)==selected? 'active':'')">
										{{item.name}}
									</div>
								</li>
							</ul>
						</div>
					</transition>
				</div>
				<div :class="(isShowMiniMenu&&$store.state.user.searchMiniView)?'miniMenuIcon_closeMenu rotating':'miniMenuIcon rotatingOpen'"
					@click.stop="showMiniMenu(this)"></div>
			</el-col>
		</el-row>

		<div @click.stop="clickShowSearch" class="searchModule" v-show="isShowSearch&&$store.state.user.searchView"
			@mouseleave="hideScarch" @mouseover="showSearch">
			<div class="inputArea">
				<div>
					<input v-on:keydown.enter="goToSearch" v-model="searchKey"
						:placeholder="$t('inputSearchContent')" />
				</div>
				<div @click="goToSearch" :title="$t('clickSearch')" class="searchBtn2  el-icon-search">
				</div>
				<!-- <div @click="hideScarch" class="closeSerchBtn" style="">
					{{$t('closeSerch')}}
				</div> -->
			</div>
		</div>

		<div class="headerChildMenuModule" v-show="isShowChildMenu" @mouseleave="hideChildMenu">
			<div class="childMunuArea">
				<div :class="'childMenuItem'+((index<childMenu.length-1)?' borderRight':'')"
					@click="goToChildPage(item.name)" v-for="(item,index) in childMenu" :key="index">
					{{item.name}}
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		//党建引领
		partyBuildingLeads,
		//企业概况
		corporateOverviewMenu,
		//企业新闻
		corporateNews,
		//产品与服务
		productsAndServicesMenu,
		//可持续发展
		csustainableDevelopmentMenu,
		//采购信息
		procurementInformationMenu,
		//人才中心
		centreOfExcellenceMenu,
		//联系我们
		contactUsMenu
	} from '../../../utils/menu.js'
	import {
		getStore,
		setStore,
		removeStore
	} from '../../../utils/tools.js';
	export default {
		name: 'Header',
		props: {
			selected: Number
		},
		components: {},
		created() {
			if (this.selected != 1) {
				this.isShowBgColor = true;
			}
			if (this.$route.query.searchKey) {
				this.searchKey = this.$route.query.searchKey;
			}

		},
		mounted() {
			/* 	this.siteName = this.$store.state.user.siteName;
				console.log('this.$store.state.user.siteName', this.$store.state.user.siteName);
				console.log('this.$store.state.user.areaId', this.$store.state.user.areaId);
				if (this.$store.state.user.personalInfoData) {
					this.userName = this.$store.state.user.personalInfoData.userName;
				} */
			// this.getMenuList();
		},
		data() {
			return {
				searchKey: '',
				menuIndex: 1,
				userName: '',
				siteName: '',
				dialogVisible: false,
				activeIndex: null,
				location: [],
				inputVal: '',
				select: '1',
				isShowBgColor: false,
				isShowSearch: false,
				isShowChildMenu: false,
				isShowMiniMenu: false,
				childMenu: [],
				miniMenuIcon: "miniMenuIcon",
				isMenuHover: false,
				isActive: [],
				menus: [{
						name: this.$t('home'),
						menuIndex: 1,
						childMenu: []
					}, {
						name: this.$t('partyBuildingLeads'), //党建资讯
						menuIndex: 2,
						childMenu: partyBuildingLeads
					},
					{
						name: this.$t('corporateOverview'), //企业概括
						menuIndex: 3,
						childMenu: corporateOverviewMenu
					},
					{
						name: this.$t('corporateNews'), //企业新闻
						menuIndex: 4,
						childMenu: corporateNews
					},
					{
						name: this.$t('productsAndServices'), //"产品与服务",
						menuIndex: 5,
						childMenu: productsAndServicesMenu
					},
					{
						name: this.$t('sustainableDevelopment'), // "可持续发展",
						menuIndex: 6,
						childMenu: csustainableDevelopmentMenu
					},
					{
						name: this.$t('procurementInformation'), //"招标采购",
						menuIndex: 7,
						childMenu: procurementInformationMenu
					},
					{
						name: this.$t('centreOfExcellence'), // "人才中心",
						menuIndex: 8,
						childMenu: centreOfExcellenceMenu
					},
					{
						name: this.$t('contactUs'), //"联系我们",
						menuIndex: 9,
						childMenu: contactUsMenu
					},
				]
			};
		},
		methods: {
			
			goTo(mIndex) {
				//移除缓存
				this.removeAllStore();
				this.menuIndex = mIndex + 1;
				this.$router.push({
					name: this.menus[mIndex].name
				});
			},
		
			goToSearch() {
				this.$router.push({
					name: this.$t("search"),
					query: {
						searchKey: this.searchKey,
					}
				});
			},
			closeSerch() {
				this.isShowSearch = false;
				this.$store.dispatch('removeSearche');
			},
			mousemove(index) {
				//this.selected=index+1;
			},
			//取消弹窗  按钮
			handleClose() {
				this.dialogVisible = false;
			},
			//banner 部分的搜索
			showSearch() {
				this.isShowSearch = true;
				this.$store.dispatch('setSearche');
				this.isShowChildMenu = false;
			},
			//banner 部分的搜索
			clickShowSearch() {
				this.isShowSearch = true;
				this.$store.dispatch('setSearche');
				this.isShowChildMenu = false;
				this.isShowMiniMenu = false;
				this.$store.dispatch('removeMiniSearche');

			},
			hideScarch() {
				let that = this;
				setTimeout(function() {
					that.isShowSearch = false;
					that.$store.dispatch('removeSearche');
				}, 300)
			},
			hideScarchAndChildMenu() {
				// this.isShowSearch = false;
				// this.isShowChildMenu = false;
			},
			//显示二级菜单
			showChildMenu(index) {
				this.isShowSearch = false;
				this.$store.dispatch('removeSearche');
				this.isMenuHover = true;
				this.isActive = this.menus.map((_, i) => i === index);
				if (index > 0) {
					this.isShowChildMenu = true;
					if (this.isShowChildMenu) {
						this.childMenu = this.menus[index].childMenu;
					}
				} else {
					this.isShowChildMenu = false;
				}
			},
			hideActive() {
				this.isMenuHover = false;
				this.isActive = this.menus.map(() => false);
			},
			hideChildMenu() {
				this.isShowChildMenu = false;
			},
			showMiniMenu(obj) {
				this.isShowMiniMenu = !this.isShowMiniMenu;
				if (this.isShowMiniMenu) {
					//	this.miniMenuIcon = "miniMenuIcon_closeMenu rotating";
					this.isShowSearch = false;
					this.$store.dispatch('setMiniSearche');
				} else {
					this.$store.dispatch('removeMiniSearche');
					//	this.miniMenuIcon = "miniMenuIcon rotatingOpen";
				}
			},
			goToChildPage(name) {
				//移除缓存
				this.removeAllStore();
				this.$router.push({
					name: name
				});
			},
			//移除缓存
			removeAllStore() {
				//党建引领
				removeStore("partyListPage");
				//企业新闻
				removeStore("enterprisePage");
				removeStore("enterpriseAnnouncePage");
				//产品与服务
				removeStore("saleAnnouncePage");
				//可持续发展
				removeStore("environmentPage");
				//采购信息
				removeStore("bidPage");
				removeStore("imorrtantPage");
				removeStore("tenderPage");
				removeStore("failedBidPage");
				//企业荣誉
				removeStore("HonorPage");
				//党员活动
				removeStore("activitiesPage");
			},
		},

		beforeDestroy() {

		},
		watch: {
			'$store.state.user.siteName': {
				handler: function(newVal, oldVal) {
					this.siteName = this.$store.state.user.siteName;
				},
				immediate: true
			}
		}
	};
</script>
<style lang='scss' scoped>
	@import url("../../../components/common/css/public/public.css");

	.header-box {
		position: fixed;
		top: 0px;
		width: 100%;
		z-index: 9999999;
		border-bottom: 1px solid rgba(202, 202, 202, 0.4);
		transition: background-color 0.5s;
		background-color: #FFF;
	}

	.header-box:hover {
		background-color: #FFF;
		opacity: 1;
	}

	.header-top-box {
		position: relative;
		box-sizing: border-box;

		height: 80px;

		/* 过渡效果，持续时间为0.5秒 */
		transition: background-color 0.5s;
		display: flex;
		flex-direction: row;
		margin: 0 auto;
	}

	.header-box-bg {
		background-color: #FFF;
		/* opacity: 0.63; */
		opacity: 1;
	}

	.menu {
		z-index: 9999;
		display: flex;
		margin-left: 2rem;
	}

	.header-top-box:hover {}

	.header-top-box .border {
		width: 100%;
		position: absolute;
		height: 1px;
		/* 	background-color: #f6f6f6; */
		background-color: #cacaca;
		transition: all 0.8s;
		opacity: 0.4;
		left: 0;
		bottom: 0;
		z-index: 99;
	}

	.search {
		position: absolute;
		width: 100%;
		height: 30px;
		line-height: 30px;
		background-color: #FFF;
		z-index: 9999;
		padding: 0px 12%;
	}

	.searchArea {
		height: 40px;
		width: 100%;
		margin-top: 20px;
		display: flex;
		z-index: 9999;

	}

	.searchBtn {
		width: 70px;
		height: 50px;
		margin-top: 10px;

		opacity: 1;
		cursor: pointer;
		font-size: 26px;
		color: #0484D7;
		text-align: center;
	}

	.searchBtn:hover {
		color: #FF7200;
		font-size: 27px;
	}

	.language {

		width: 80px;
		height: 40px;
		color: #000;
		font-size: 1rem;
		font-weight: 530;
		line-height: 40px;
		text-align: center;
		cursor: pointer;
	}

	.language:hover {
		color: #0484D7;
		font-size: 1.1rem;
	}

	.language a {
		color: #0484D7;
	}

	.languageList {
		width: 80px;
		height: 80px;
		background-color: #333;
		position: absolute;
		z-index: 9999999;
		color: #FFF;
		display: none;
	}

	.languageList li {
		height: 40px;
		line-height: 40px;
		text-align: center;
		background-color: #333;
		cursor: pointer;
	}

	.languageList li:hover {
		background-color: #e4e3e3;
	}



	.logo img {
		max-width: 100%;

		cursor: pointer;
	}

	.menuList {

		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		/* 设置高度为100%以便flex布局生效 */
	}

	.menuItem {
		position: relative;
		text-align: center;
		color: #000;
		font-weight: 530;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

	}

	.menuItem:hover {
		color: #0484D7;
	}

	.activeLine {
		position: absolute;
		bottom: -1px;
		height: 2px;
		width: 100%;
	}

	.triangle {
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid #0484D7;
		position: absolute;
		bottom: 0px;
		/* 居中显示 */
		left: 50%;
		transform: translateX(-50%);
		width: 10px;
	}

	.activeLine.active {
		background-color: #0484D7;
	}

	.menuItem.active {
		color: #0484D7;
	}

	.headerChildMenuModule {
		position: absolute;
		width: 100%;
		height: 170px;
		line-height: 80px;
		z-index: 2;
		padding: 0px 12%;
		top: 80px;
		background-color: #FFF;
		opacity: 1;
		border-top: 1px solid rgba(202, 202, 202, 0.4);
	}

	.searchModule {

		position: absolute;
		width: 100%;
		height: 170px;
		line-height: 80px;
		z-index: 2;
		padding: 0px 12%;
		top: 80px;
		background-color: #FFF;
		opacity: 1;
		border-top: 1px solid rgba(202, 202, 202, 0.4);

		.inputArea {
			width: 60%;
			height: 50px;
			border-bottom: 1px solid #999;
			position: absolute;
			margin-left: 10%;
			top: 70px;
			display: flex;

			input {
				position: absolute;
				height: 40px;
				width: 96%;
				top: 5px;
				border: 0px solid #FFF;
				outline: none;
				padding: 10px;
			}
		}

		.searchBtn2 {
			width: 30px;
			height: 30px;
			position: absolute;
			right: 0px;
			top: 10px;
			width: 30px;
			height: 30px;
			margin-top: 8px;
			opacity: 1;
			cursor: pointer;
			font-size: 26px;
			color: #cfd1d5;
			text-align: center;
		}

		.searchBtn2:hover {
			color: #0484D7;
			font-size: 27px;
		}
	}

	.miniMenuIcon {
	 
		width: 50px;
		height: 50px;
		position: absolute;
		right: 20px;
		top: 15px;
		background-image: url("../../../assets/icons/icon_miniMenu.png");
		background-size: 26px;
		background-repeat: no-repeat;
		background-position: center;
		z-index: 9999;
		transition: transform 1s;
	}

	.miniMenuIcon_closeMenu {
		 
		width: 50px;
		height: 50px;
		position: absolute;
		right: 5px;
		top: 15px;
		background-image: url("../../../assets/icons/icon_colseMenu.png");
		background-size: 26px;
		background-repeat: no-repeat;
		background-position: center;
		z-index: 9999;
		transition: transform 1s;

	}

	.rotating {
		transform: rotate(180deg);
	}

	.rotatingOpen {
		transform: rotate(360deg);
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.8s;
	}

	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}

	.miniMenuArea {
		position: absolute;
		width: 100%;
		height: 329px;
		line-height: 80px;
		z-index: 99;
		padding: 0px 12%;
		top: 0px;
		display: flex;
		/* flex-direction: row; */
		background-color: #FFF;
		/* opacity: 0.6; */
		text-align: center;



		ul {
			width: 100%;
		}

		li {
			height: 30px;
			font-size: 1.2rem;
		}
	}

	.childMenuItem {

		min-width: 150px;
		padding: 0 5px;
		text-align: center;
		cursor: pointer;
		font-size: 16px !important;
	}

	.childMenuItem:hover {
		color: #0484D7;
	}

	.borderRight {
		height: 26px;
		line-height: 26px;
		border-right: 1px solid #0484D7;
	}

	.childMunuArea {
		width: 100%;
		margin: 0 auto;
		height: 100%;
		display: flex;

		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.closeSerchBtn {
		position: absolute;
		bottom: -50px;
		right: -50px;
		height: 40px;
		width: 40px;
		line-height: 40px;
		text-align: center;
		cursor: pointer;
		color: #F56C6C;
		display: none;
	}

	@media (max-width: 768px) {
		.menuList {
			display: none;
		}

		.navText {
			display: none;
		}


		.miniMenuIcon {
			display: block;
			right: 5px;
		}

		.miniMenuArea .menuItem {
			width: 100%;
			font-size: 0.9rem;
			font-weight: 400;
			height: 35px;
			line-height: 35px;
		}

		.language {
			padding-right: 100px;
		}

		.searchArea {}

		.miniMenuArea {
			top: 80.5px;
			left: 0px;
			border-bottom: 1px solid #e3d9d9;
		}

		.miniMenuArea li {
			height: 35px;
			line-height: 35px;
		}

		.headerChildMenuModule {
			display: none;
		}

		.closeSerchBtn {
			display: block;
		}
	}

	@media (min-width: 769px) {


		.menu {
			margin-left: 0.3rem;
		}

		.menuItem {
			margin-left: 1vw !important;
			font-size: 10px;
		}

		.language {
			font-size: 12px;
			width: 50px;
		}

		.language:hover {
			font-size: 13px;
		}

		.searchBtn {
			font-size: 20px;
			padding-left: 0;
			width: 40px;
		}

		.searchBtn:hover {
			font-size: 20px;
		}

		.menuItem {}

		.navText {
			display: block;
		}



		.miniMenuIcon {
			display: none;
		}

		.miniMenuArea {
			display: none;
		}
	}

	@media (min-width: 1024px) {


		.language {
			font-size: 14px;
			width: 50px;
		}

		.language:hover {
			font-size: 15px;
		}

		.menuItem {
			margin-left: 1.2vw !important;
			font-size: 12px;
		}

		.menuItem:last-child {}

		.menuItem {}

		.navText {
			display: block;
		}


		.miniMenuIcon {
			display: none;
		}

		.miniMenuArea {
			display: none;
		}
	}

	@media (min-width: 1280px) {


		.language {
			font-size: 15px;
			width: 50px;
		}

		.language:hover {
			font-size: 16px;
		}

		.menuItem {
			margin-left: 1.8vw !important;
		}

		.searchBtn {
			font-size: 22px;
			padding-left: 0;
			width: 40px;
		}

		.searchBtn:hover {
			font-size: 22px;
		}

		.menuItem:last-child {}

		.menuItem {}

		.navText {
			display: block;
		}


		.miniMenuIcon {
			display: none;
		}

		.miniMenuArea {
			display: none;
		}
	}

	@media (min-width: 1366px) {


		.menuItem {
			font-size: 14px;
		}


		.menu {
			margin-left: 1rem;
		}

		.searchBtn {
			font-size: 20px;
			padding-left: 0;
			width: 80px;
		}

		.searchBtn:hover {
			font-size: 20px;
		}

	}

	@media (min-width: 1440px) {


		.menuItem {
			margin-left: 1.6vw !important;
			font-size: 15px;
		}
	}

	@media (min-width: 1600px) {


		.menuItem {
			margin-left: 2vw !important;
			font-size: 15px;
		}

		.menuItem:last-child {
			margin-right: 1vw !important;
		}
	}

	@media (min-width: 1680px) {


		.menuItem {
			margin-left: 2.2vw !important;
			font-size: 15px;
		}

		.menuItem:last-child {
			margin-right: 2vw !important;
		}

		.menuItem {}

		.navText {
			display: block;
		}

		.miniMenuIcon {
			display: none;
		}

		.miniMenuArea {
			display: none;
		}


	}


	@media (min-width: 1920px) {

		.searchBtn {
			font-size: 24px;
			padding-left: 0;
			width: 80px;
		}

		.searchBtn:hover {
			font-size: 24px;
		}

		.menu {
			margin-left: 1.8vw !important;

		}

		.menuItem {
			margin-left: 1.7vw !important;
			font-size: 18px;
		}

		.menuItem:last-child {
			margin-right: 2vw !important;
		}

		.menuItem {}

		.navText {
			display: block;
		}

		.language {
			font-size: 1.35rem;
		}

		.language:hover {
			font-size: 1.4rem;
		}

		.miniMenuIcon {
			display: none;
		}

		.miniMenuArea {
			display: none;
		}
	}

	@media (min-width: 2000px) {


		.menu {
			margin-left: 2.2vw !important;
		}

		.menuItem {
			margin-left: 2.5vw !important;
			font-size: 18px;
		}

		.menuItem:last-child {
			margin-right: 4vw !important;
		}
	}

	@media (min-width: 2500px) {


		.searchBtn {
			font-size: 27px;
		}

		.searchBtn:hover {
			font-size: 27px;
		}

		.menuItem:last-child {
			margin-right: 5vw !important;
		}
	}
</style>